<template>
  <div class="app-container">
    <div>
      <el-tabs v-model="activeName" @tab-click="handleTabClick">
        <el-tab-pane label="关注" name="first">
          <el-empty v-show="empty" description="您未关注任何其他人"></el-empty>
          <div class="follow-container">
            <div class="follow-content">
              <div
                class="blog-content"
                v-for="(blog, index) in followList"
                :key="index"
              >
                <div class="content-block">
                  <div class="left-block">
                    <div class="blog-title">{{ blog.title }}</div>
                    <div class="blog-desc">{{ blog.blogDesc }}</div>
                    <div class="blog-stuff">
                      <div class="blog-auth">{{ blog.ownerNickname }}</div>
                      <div class="blog-createtime">{{ blog.createTime }}</div>
                    </div>
                  </div>
                  <div class="right-block">
                    <div class="blog-img"><img :src="this.baseImgUrl+blog.blogCover"></div>
                  </div>
                </div>
              </div>
            </div>

            <div class="following">
              <div class="follow-people">
                <div class="follow-people-list" v-for="(item, index) in followPeopleList" :key="index">
                  <div class="headPic">{{item.headPic}}</div>
                  <div class="nickname">{{item.owenrNickname}}</div>
                </div>
              </div>
              <div class="follow-blog" v-for="(item, index) in followBlogList" :key="index">
                <div class="follow-people-list">
                  <!-- <div class="headPic">{{item.blogCover}}</div> -->
                  <i class="el-icon-notebook-2"></i>
                  <div class="nickname">{{item.mainBlogTitle}}</div>
                </div>
              </div>
            </div>
          </div>
        </el-tab-pane>

        <el-tab-pane label="推荐" name="second">
          <div class="follow-container recommend-container">
            <div class="follow-content recommend-content">
                <div
                class="blog-content"
                v-for="(blog, index) in recommendList"
                :key="index"
                >
                    <div class="content-block">
                    <div class="left-block">
                        <div class="blog-title">{{ blog.title }}</div>
                        <div class="blog-desc">{{ blog.blogDesc }}</div>
                        <div class="blog-stuff">
                        <div class="blog-auth">{{ blog.ownerNickname }}</div>
                        <div class="blog-createtime">{{ blog.createTime }}</div>
                        </div>
                    </div>
                    <div class="right-block">
                        <div class="blog-img">{{ blog.blogCover }}</div>
                    </div>
                    </div>
                </div>
            </div>
            <div class="recommend">
              <div class="recommend-people">
                <div class="follow-people-list" v-for="(item, index) in recommendPeopleList" :key="index">
                <div class="headPic">{{item.headPic}}</div>
                <div class="nickname">{{item.owenrNickname}}</div>
                </div>
              </div>
            </div>
          </div>
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      activeName: "first",
      empty: true,
      baseImgUrl: 'http://localhost:8041/uploadBlogCover/',
      followList: [],
      followPeopleList: [],
      followBlogList: [],
      recommendList: [],
      recommendPeopleList: [],
    };
  },
  created() {
    console.log(this.followList);
    if (this.followList.length > 0) {
      this.empty = false;
    } else {
      this.empty = true;
    }
  },
  methods: {
    handleTabClick(tab, event) {
      console.log(tab, event);
    },
  },
};
</script>

<style lang="scss" scoped>
.follow-container {
  width: 80%;
  margin: 0 auto;
  display: block;
}
.follow-content {
  width: 70%;
  display: inline-block;
}
.following {
  width: 30%;
  height: 600px;
  display: inline-block;
}
.follow-people {
  width: 100%;
  height: 30%;
}
.follow-blog {
  width: 100%;
  height: 70%;
}
.recommend {
  width: 30%;
  height: 600px;
  display: inline-block;
}
.recommend-people {
  width: 100%;
  height: 100%;
}
.follow-people-list {
  width: 100%;
  display: block;
}
.headPic {
  width: 35%;
  height: 48px;
  display: inline-block;
}
.nickname {
  width: 65%;
  height: 48px;
  display: inline-block;
}

.line {
  text-align: center;
}
.newBlog-button {
  width: 100%;
  height: 100%;
  text-align: right;
}
.blog-title-block {
  font-weight: 900;
  margin: 0 auto;
  text-align: center;
}
.blog-title {
  font-weight: 700;
}
.blog-desc-block {
  text-align: center;
}
.blog-auth-block {
  text-align: center;
}
.blog-sub-block {
  text-align: center;
}
.second-head {
  margin: 0 auto;
  width: 75%;
}
.left-font {
  display: inline;
}
.right-font {
  display: inline;
  float: right;
}
.blog-content {
  width: 70%;
  margin: 0 auto;
}
.content-block {
  width: 100%;
  /* margin: 0 auto;
  display: inline-block; */
  display: block;
}
.left-block {
  width: 70%;
  display: inline-block;
  height: 100%;
}
.right-block {
  width: 30%;
  display: inline-block;
  height: 100%;
}
.blog-stuff {
  width: 100%;
  display: block;
}
.blog-auth {
  display: inline-block;
}
.blog-createtime {
  display: inline-block;
}
</style>